<template>
  <view class="xen-form-actions" :class="{ hidden: hidden }">
    <view class="actions-container" :style="containerStyle">
      <view class="actions-content">
        <view class="primary-actions">
          <button
            v-for="action in actions"
            :key="action.key"
            class="action-btn"
            :class="getButtonClass(action.type)"
            :style="action.customStyle"
            :disabled="action.disabled"
            @click="handleAction(action)"
          >
            <uni-icons
              v-if="action.icon"
              :type="action.icon as any"
              size="18"
              :color="getIconColor(action.type)"
            ></uni-icons>
            <text class="btn-text">{{ action.label }}</text>
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";
// 定义操作类型
type ActionType = "primary" | "success" | "warning" | "danger" | "default";

// 定义操作接口
interface FormAction {
  key: string;
  label: string;
  type: ActionType;
  icon?: string;
  disabled?: boolean;
  customStyle?: string;
}

// 组件属性
interface Props {
  actions?: FormAction[];
  hidden?: boolean; // 是否隐藏组件
  safeAreaBottom?: boolean; // 是否适配底部安全区域
}

const props = withDefaults(defineProps<Props>(), {
  actions: () => [],
  hidden: false,
  safeAreaBottom: true, // 默认开启安全区域适配
});

// 事件定义
const emit = defineEmits<{
  (e: "action", action: FormAction): void;
}>();

// 容器样式
const containerStyle = computed(() => {
  const styles: Record<string, string> = {};

  if (props.safeAreaBottom) {
    // 获取底部安全区域高度
    const systemInfo = uni.getSystemInfoSync();
    const safeAreaBottom = systemInfo.safeAreaInsets?.bottom || 0;
    // 为安卓端增加额外的底部间距，确保不贴边
    const extraBottomPadding = 8; // 额外增加8px底部间距
    styles.paddingBottom = `${safeAreaBottom + extraBottomPadding}px`;
  }

  return styles;
});

// 获取按钮样式类
const getButtonClass = (type: ActionType): string => {
  return `action-btn--${type}`;
};

// 获取图标颜色
const getIconColor = (type: ActionType): string => {
  const colorMap: Record<ActionType, string> = {
    primary: "#ffffff",
    success: "#ffffff",
    warning: "#ffffff",
    danger: "#ffffff",
    default: "#666666",
  };
  return colorMap[type] || "#666666";
};

// 处理操作点击
const handleAction = (action: FormAction) => {
  if (action.disabled) return;
  emit("action", action);
};
</script>

<style lang="scss" scoped>
.xen-form-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

.actions-container {
  background-color: #ffffff;
  border-top: 1px solid #f0f0f0;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
  padding: 8px 16px;
  // 安全区域适配通过 JavaScript 动态计算
}

.actions-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.primary-actions {
  flex: 1;
  display: flex;
  gap: 12px;
}

.action-btn {
  flex: 1;
  height: 44px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  border: none;
  transition: all 0.2s;

  &:active {
    opacity: 0.8;
  }

  &[disabled] {
    opacity: 0.5;
  }

  &--primary {
    background: linear-gradient(135deg, #7579f5 0%, #9973f8 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(107, 114, 242, 0.3);
  }

  &--success {
    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
  }

  &--warning {
    background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(250, 173, 20, 0.3);
  }

  &--danger {
    background: linear-gradient(135deg, #f5222d 0%, #ff4d4f 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(245, 34, 45, 0.3);
  }

  &--default {
    background: #f0f0f0;
    color: #666;
  }
}

.btn-text {
  font-size: 15px;
}

// 隐藏底部操作栏
.xen-form-actions.hidden {
  display: none;
}
</style>
